<template>
    <div class="table-body-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <div class="${module}-${lowerFirst(className)}-search mb15">
                <%	for(attr in attrs){
                if (attr.colName=="del_flag" || attr.colName=="id" || attr.colName=="create_by" || attr.colName=="create_date" || attr.colName=="update_by" || attr.colName=="update_date") continue;
                %>
                        <%
                        if (attr.dictName!=null) {
                        %>
                        <el-select v-model="state.tableData.param.${attr.name}" placeholder="请选择${attr.comment}" class="ml10 search-input" clearable>
                            <el-option
                                    v-for="dict in ${attr.dictName}"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                            />
                        </el-select>
                        <%}%>
                        <%
                        if (attr.dictName==null) {
                        %>
                        <el-input v-model="state.tableData.param.${attr.name}" placeholder="请输入${attr.comment}" class="ml10 search-input" clearable></el-input>
                        <%}%>
                <%}%>
                <el-button icon="Search" size="default" @click="getTableData" type="primary" class="ml10">
                    查询
                </el-button>
                    <el-button icon="DocumentAdd" v-auth="'${module}:${lowerFirst(className)}:add'" size="default" type="success" class="ml10" @click="onOpenAdd(state.add)">
                        新增
                    </el-button>
            </div>
            <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
                <%	for(attr in attrs){
                if (attr.colName=="del_flag" || attr.colName=="id" || attr.colName=="create_by" || attr.colName=="create_date" || attr.colName=="update_by" || attr.colName=="update_date") continue;
                %>
                <%
                if (attr.dictName!=null) {
                %>
                <el-table-column prop="${attr.name}" label="${attr.comment}" :formatter="(row:any)=>{return proxy.selectDictLabel(${attr.dictName},row.${attr.name})}" show-overflow-tooltip></el-table-column>
                <%}%>
                <%
                if (attr.dictName==null) {
                %>
                <el-table-column prop="${attr.name}" label="${attr.comment}" show-overflow-tooltip></el-table-column>
                <%}%>
                <%}%>
                <el-table-column label="操作" width="100">
                    <template #default="scope">
                        <el-tooltip v-auth="'${module}:${lowerFirst(className)}:update'" content="修改" placement="top">
                            <el-button link icon="Edit" size="small" text type="primary" @click="onOpenEdit(state.edit, scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip v-auth="'${module}:${lowerFirst(className)}:delete'" content="删除" placement="top">
                            <el-button link icon="Delete" size="small" text type="primary" @click="onRowDel(scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <pagination
                    v-show="state.tableData.total>0"
                    :total="state.tableData.total"
                    v-model:page="state.tableData.param.current"
                    v-model:limit="state.tableData.param.size"
                    @pagination="getTableData"
            />
        </el-card>
        <${className}Dialog ref="${lowerFirst(className)}DialogRef" @refresh="getTableData()"
        <%	for(attr in attrs){%>
            <%
            if (attr.dictName!=null) {
            %>
                :${attr.varDictName}-dict="${attr.dictName}"
            <%}%>
        <%}%>
        />
    </div>
</template>

<script setup lang="ts" name="${module}${className}">
    import { ${lowerFirst(className)}Api } from '/@/api/${module}/${lowerFirst(className)}';
    import constConfig from '/@/utils/constConfig';

    // 引入组件
    const ${className}Dialog = defineAsyncComponent(() => import('/@/views/${module}/${lowerFirst(className)}/dialog.vue'));

    // 定义变量内容
    <% if (dictVar!=null) {%>
    const { proxy } = <any>getCurrentInstance();
    const { ${dictVar} } = proxy.useDict('${dictType}');
    <%}%>
    const ${lowerFirst(className)}DialogRef = ref();
    const state = reactive({
        tableData: {
            data: [],
            total: 0,
            loading: false,
            param: {
                <%	for(attr in attrs){
                if (attr.colName=="del_flag" || attr.colName=="id" || attr.colName=="create_by" || attr.colName=="create_date" || attr.colName=="update_by" || attr.colName=="update_date") continue;
                %>
                ${attr.name}: null,
                <%}%>
                ...constConfig.pageModel,
            },
        },
        formData: {
            <%	for(attr in attrs){
            if (attr.colName=="del_flag" || attr.colName=="id" || attr.colName=="create_by" || attr.colName=="create_date" || attr.colName=="update_by" || attr.colName=="update_date") continue;
            %>
            ${attr.name}: null,
            <%}%>
        },
        ...constConfig.dialogType
    });

    // 初始化表格数据
    const getTableData = () => {
        state.tableData.loading = true;
        ${lowerFirst(className)}Api().page(state.tableData.param).then(res=>{
            state.tableData.data = res.data.records??[];
            state.tableData.total = res.data.total;
            state.tableData.loading = false;
        })
    };
    // 打开新增字典弹窗
    const onOpenAdd = (type: string) => {
        let row = JSON.parse(JSON.stringify(state.formData));
        ${lowerFirst(className)}DialogRef.value.openDialog(type, row);
    };
    // 打开修改字典弹窗
    const onOpenEdit = (type: string, row: ${className}Type) => {
        row = JSON.parse(JSON.stringify(row))
        ${lowerFirst(className)}DialogRef.value.openDialog(type, row);
    };
    // 删除字典
    const onRowDel = (row: ${className}Type) => {
        ElMessageBox.confirm(`\${constConfig.delString.tip1 + row.label + constConfig.delString.tip2}`, '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            ${lowerFirst(className)}Api().del(row.id).then(() => {
                getTableData();
            })
        })
            .catch(() => {});
    };
    // 页面加载时
    onMounted(() => {
        getTableData();
    });
</script>
<style scoped lang="scss">
.table-body-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;
        .el-table {
            flex: 1;
        }
    }
}
</style>